<template>
  <div class="home">
    <!-- 搜索 -->
    <van-search
      show-action
      shape="round"
      background="red"
      placeholder="卡姿兰大眼睛"
      @click-input="$router.push('/search')"
    >
      <template #left>
        <div class="address" @click.stop="$router.push('/address')">地址</div>
      </template>
      <template #action v-if="token">
        <div class="my" @click.stop="$router.push('/mine')">我的</div>
      </template>
      <template #action v-else>
        <div class="my" @click.stop="$router.push('/login')">登录</div>
      </template>
    </van-search>
    <!-- 轮播图 -->
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="item in bannerList" :key="item.bannerid">
        <img :src="item.img" alt="" />
      </van-swipe-item>
    </van-swipe>
    <!-- 菜单 -->
    <van-grid column-num="5" :border="false" :square="true">
      <van-grid-item
        icon="https://m15.360buyimg.com/mobilecms/jfs/t1/175540/24/19329/6842/60ec0b0aEf35f7384/ec560dbf9b82b90b.png!q70.jpg"
        text="京东超市"
      />
      <van-grid-item
        icon="https://m15.360buyimg.com/mobilecms/jfs/t1/178015/31/13828/6862/60ec0c04Ee2fd63ac/ccf74d805a059a44.png!q70.jpg"
        text="数码电器"
      />
      <van-grid-item
        icon="https://m15.360buyimg.com/mobilecms/jfs/t1/54043/33/19389/4660/62b049dbE3b9aef75/2fcd31afd5d702e4.png!q70.jpg"
        text="京东新百货"
      />
      <van-grid-item
        icon="https://m15.360buyimg.com/mobilecms/jfs/t1/177902/16/13776/5658/60ec0e71E801087f2/a0d5a68bf1461e6d.png!q70.jpg"
        text="京东生鲜"
      />
      <van-grid-item
        icon="https://m15.360buyimg.com/mobilecms/jfs/t1/196472/7/12807/7127/60ec0ea3Efe11835b/37c65625d94cae75.png!q70.jpg"
        text="京东到家"
      />
      <van-grid-item
        icon="https://m15.360buyimg.com/mobilecms/jfs/t1/175540/24/19329/6842/60ec0b0aEf35f7384/ec560dbf9b82b90b.png!q70.jpg"
        text="京东超市"
      />
      <van-grid-item
        icon="https://m15.360buyimg.com/mobilecms/jfs/t1/178015/31/13828/6862/60ec0c04Ee2fd63ac/ccf74d805a059a44.png!q70.jpg"
        text="数码电器"
      />
      <van-grid-item
        icon="https://m15.360buyimg.com/mobilecms/jfs/t1/54043/33/19389/4660/62b049dbE3b9aef75/2fcd31afd5d702e4.png!q70.jpg"
        text="京东新百货"
      />
      <van-grid-item
        icon="https://m15.360buyimg.com/mobilecms/jfs/t1/177902/16/13776/5658/60ec0e71E801087f2/a0d5a68bf1461e6d.png!q70.jpg"
        text="京东生鲜"
      />
      <van-grid-item
        icon="https://m15.360buyimg.com/mobilecms/jfs/t1/196472/7/12807/7127/60ec0ea3Efe11835b/37c65625d94cae75.png!q70.jpg"
        text="京东到家"
      />
    </van-grid>
    <!-- 列表 -->
    <van-list
      v-model:loading="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
    >
      <div class="time">
        <p>京东秒杀</p>
        <span>10点专场</span>
        <van-count-down :time="time">
          <template #default="timeData">
            <span class="block">{{ timeData.hours }}</span>
            <span class="colon">:</span>
            <span class="block">{{ timeData.minutes }}</span>
            <span class="colon">:</span>
            <span class="block">{{ timeData.seconds }}</span>
          </template>
        </van-count-down>
      </div>
      <ul class="seckill">
        <li v-for="item in seckilllists" :key="item" v-show="item.img1">
          <img :src="item.img1" :alt="item.proname" />
          <span>￥{{ item.originprice }}</span>
        </li>
      </ul>
      <ul class="list">
        <li
          v-for="item in goods"
          :key="item"
          v-show="item.img1"
          @click="detail(item)"
        >
          <img :src="item.img1" :alt="item.proname" />
          <p>{{ item.proname }}</p>
          <span>￥{{ item.originprice }}</span>
        </li>
      </ul>
    </van-list>
  </div>
</template>

<script setup lang="ts">
import { useCounterStore } from "../stores/counter";
import { storeToRefs } from "pinia";
import { useRouter } from "vue-router";
import { ref, onMounted } from "vue";
import { getSwiperList, goodsList, seckilllist } from "../server/home";
const counterStore = useCounterStore();
const { token } = storeToRefs(counterStore);
const router = useRouter();
let bannerList = ref([]);
let seckilllists = ref([]);
let goods = ref([]);
let time = ref(1 * 60 * 60 * 1000);
let loading = ref(false);
let finished = ref(false);
let page = ref(1);
// 获取轮播图数据
onMounted(() => {
  // 获取轮播图数据
  getSwiperList().then((res) => {
    bannerList.value = res.data;
  });
  seckilllist().then((res) => {
    seckilllists.value = res.data;
  });
});
function detail(data: any) {
  console.log(data.proid);
  router.push(`/detail?id=${data.proid}`);
  // console.log($router.push(`/detail?id=${item.proid}`));
}
// 获取商品数据
function onLoad() {
  goodsList({ count: page.value, limitNum: 10 }).then((res) => {
    goods.value = goods.value.concat(res.data);
    loading.value = false;
    page.value++;
    if (goods.value.length >= 150) {
      finished.value = true;
    }
  });
}
</script>

<style>
.home {
  width: 100%;
  overflow-y: auto;
  height: calc(100% - 3.125rem);
}

.van-search {
  height: 3.125rem;
  width: 100%;
  padding: 0 0.625rem;
}
.address {
  margin-right: 0.625rem;
}
.my,
.address {
  color: #fff;
}
.van-search__content {
  border-radius: 1.875rem;
}
/* 轮播图 */
.my-swipe {
  height: 10.625rem;
  width: 100%;
  margin: 1.25rem 0;
  overflow: hidden;
}
.my-swipe .van-swipe-item {
  text-align: center;
}
.my-swipe .van-swipe-item > img {
  height: 100%;
  border-radius: 0.9375rem;
}
.van-grid-item__content {
  padding: 0;
}
.list {
  border-radius: 0.9375rem;
  padding: 0 0.625rem;
  box-sizing: border-box;
  margin: 0.3125rem 0.9375rem;
  display: flex;
  flex-wrap: wrap;
  background-color: #fff;
  justify-content: space-between;
}
.list > li {
  width: 45%;
  margin: 0.625rem 0.3125rem;
  border-radius: 0.9375rem;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.list > li > img {
  width: 100%;
  border-radius: 0.9375rem;
}
.list > li > p {
  font-size: 0.75rem;
  color: #666;
  -webkit-line-clamp: 2;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.list > li > span {
  color: red;
  text-align: center;
}
.time {
  width: 100%;
  height: 3.75rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-right: 0.9375rem;
  box-sizing: border-box;
}
.time > p {
  font-size: 1rem;
  font-weight: 600;
  margin-left: 1.25rem;
}
.time > span {
  color: red;
  font-size: 1.125rem;
}
.colon {
  display: inline-block;
  margin: 0 4px;
  color: #1989fa;
}
.block {
  display: inline-block;
  width: 22px;
  color: #fff;
  font-size: 12px;
  text-align: center;
  background-color: red;
}
.seckill {
  margin: 0 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #fff;
}
.seckill > li {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.seckill img {
  height: 3.125rem;
}
.seckill p {
  font-size: 10px;
  -webkit-line-clamp: 2;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.seckill span {
  font-size: 12px;
  color: red;
}
</style>
